<template>
  <base-modal :title="$t('common.base.approve')" :show.sync="visible" width="600px" class="approve-performance-modal" @closed="reset">

    <ul class="approve-info">
      <li>
        <label>{{$t('common.base.serialNumber')}}：</label> {{approveData.objNo}}
      </li>
      <li>
        <label>{{$t('common.base.source')}}：</label> {{$t('common.base.productRegister')}}
      </li>
      <li>
        <label>{{$t('common.base.classification')}}：</label> {{approveData.typeName}}
      </li>
      <li>
        <label>{{$t('common.base.operation')}}：</label> {{approveData.action}}
      </li>
      <li>
        <label>{{$t('common.base.content')}}：</label> {{approveData.action}} {{approveData.objNo}}
      </li>
      <li>
        <label>{{$t('common.base.promoter')}}：</label> {{approveData.proposerName}}
      </li>
      <li>
        <label>{{$t('common.label.launchTime')}}：</label> {{approveData.createTime | fmt_datetime}}
      </li>
      <li>
        <label>{{$t('common.label.launchRemark')}}：</label> {{approveData.applyRemark}}
      </li>
      <li>
        <label>{{$t('common.label.approvalResult')}}：</label>
        <el-radio v-model="form.state" :label="1">{{$t('common.base.agree')}}</el-radio>
        <el-radio v-model="form.state" :label="0">{{$t('common.label.disagree')}}</el-radio>
      </li>
      <li>
        <label>{{$t('common.label.approvalRemark')}}：</label>
        <el-input type="textarea" v-model="form.approveRemark" resize="none" rows="3" :maxlength="500"></el-input>
      </li>
    </ul>


    <p class="tip">{{$t('common.base.remark')}}：{{$t('common.label.unmodifyApprovalResult')}}</p>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="onSubmit" :disabled="approveLoading" >{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import * as RepositoryApi from '@src/api/Repository'

export default {
  name: 'approve-dialog',
  props: {
    approveData: {
      type: Object,
      default: () => ({})
    },
    approveLoading: Boolean
  },
  data() {
    return {
      visible: false,
      init: false,
      form: {
        state: 1,
        approveRemark: '',
      },
      rules: {
        approveRemark: [
          { required: true, message: this.$t('common.validate.inputRefauseReason'), trigger: 'blur' },
          { max: 500, message: this.$t('common.base.tip.maxCharacterTip', {num: '500'}), trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    open() {
      this.init = true;
      this.visible = true;
    },
    close() {
      this.visible = false
    },
    onSubmit() {
      if(this.form.state === 0 && !this.form.approveRemark) {
        this.$platform.notification({
          title: this.$t('common.validate.inputRefauseReason'),
          type: 'error',
        });
        return;
      }

      this.$emit('approveCheck', {...this.form})
    },

    reset() {
      this.init = false;
    },
  },
}
</script>

<style lang="scss">

  .approve-performance-modal {

    .approve-info {
      margin: 0;
      padding: 15px 0 0;

      li {
        list-style: none;
        display: flex;
        word-break: break-all;

        label {
          width: 100px;
          margin: 0;
          line-height: 26px;
          flex-shrink: 0;
        }
      }
    }

    .tip {
      margin: 10px 0 0;
      line-height: 26px;
      font-size: 12px;
      color: #999;
    }

    .base-modal-body {
      padding: 0 30px;
    }

    .dialog-footer {
      text-align: right;
      /*padding: 15px 0 ;*/
    }
  }

  .el-form {
    padding-top: 15px;

    .el-form-item {
      margin: 0 !important;

      .el-form-item__content {
        line-height: 26px;

        .el-textarea {
          width: calc(100% - 100px);
        }

        .el-form-item__error {
          margin-left: 100px;
        }
      }
    }
  }
</style>